<template>
	<div class="hot-radio-wraper">
		<div class="nav-head"><router-link to="/radBoa"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">热门电台</div></div>
		<div class="top-blank"></div>
		<div class="hot-radio-swiper">
			<div class="hot-radio">
				<h2>主题电台你知道吗</h2>
				<div class="hot-list">
					<div><img src="../../../../assets/12240.png"><p>小编无损强推荐</p></div>
					<div class="mlr15"><img src="../../../../assets/8240.png"><p>悦耳流行</p></div>
					<div><img src="../../../../assets/11240.png"><p>诉说我们的那些年</p></div>
				</div>
			</div>
			<div class="hot-radio">
				<h2>主题电台-愿终生等候，还你霎那芳华</h2>
				<div class="hot-list">
					<div><img src="../../../../assets/1240.png"><p>所有的相遇都是缘分</p></div>
					<div class="mlr15"><img src="../../../../assets/8240.png"><p>凌风起舞迷了风月</p></div>
					<div><img src="../../../../assets/12240.png"><p>诉说清梦</p></div>
				</div>
			</div>
			<div class="hot-radio">
				<h2>主题电台-和二次元来一场私奔的爱</h2>
				<div class="hot-list">
					<div><img src="../../../../assets/14240.png"><p>小编无损强推荐</p></div>
					<div class="mlr15"><img src="../../../../assets/1240.png"><p>悦耳流行</p></div>
					<div><img src="../../../../assets/13240.png"><p>诉说我们的那些年</p></div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
import musicPlayer from '../../../../components/music_player'
	export default {
		name:"hotRadio",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}	
.hot-radio-swiper{
	width: 100%;
	background-color: #dbd7df;
	.hot-radio{
		background-color: #fff;
		width: 100%;
		margin-bottom: 20 / 100rem;
		h2{
			font-size: 30 / 100rem;
			padding-top: 33 / 100rem;
			padding-bottom: 20 / 100rem;
			margin-left: 20 / 100rem;
		}
		.hot-list{
			width: 100%;
			overflow: hidden;
			div{
				float: left;
				width: 240 / 100rem;
				img{
					width: 100%;
				}
				p{
					font-size: 24 / 100rem;
					padding-top: 15 / 100rem;
					margin-left: 10 / 100rem;
					padding-bottom: 40 / 100rem;
				}
			}
		}
	}
}
.mlr15{
	margin-left: 15 / 100rem;
	margin-right: 15 / 100rem;
}
</style>